<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单分页</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.8.11/css/layui.css">
</head>
<body>

<div style="margin: 40px 200px">
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">订单管理</li>
            <li>用户管理</li>
            <li>商品管理</li>
            <li>日志管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show"><table id="demo" lay-filter="test"></table></div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容4</div>
        </div>
    </div>
</div>
<form class="layui-form" action="" id="frm" style="display:none"  lay-filter="example">
    <div class="layui-form-item">
        <label class="layui-form-label">编号：</label>
        <div class="layui-input-block">
            <input type="text" name="id" required  readonly lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户编号：</label>
        <div class="layui-input-block">
            <input type="text" name="userId" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">下单时间：</label>
        <div class="layui-input-inline">
            <input type="text" name="createtime" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">数量：</label>
        <div class="layui-input-block">
            <input type="text" name="number" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注：</label>
        <div class="layui-input-block">
            <textarea name="note" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>

</form>



</body>
</html>
<!-- 引入 layui.js -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://www.layuicdn.com/layui-v2.8.11/layui.js"></script>
<script type="text/javascript">
    layui.use('table', function(){
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        //日期
        laydate.render({
            elem: '#date'
        });
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 300
            ,url: 'http://localhost:8080/order_mis2/order/list' //数据接口
            ,page: true //开启分页
            ,limit: 3
            ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,limits:[3,5,7,9]
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'userId', title: '用戶id', width:80}
                ,{field: 'number', title: '數量', width:80, sort: true}
                ,{field: 'createtime', title: '時間', width:80}
                ,{field: 'note', title: '备注', width: 177}
            ]]
        });
        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'add':
                    layer.msg('添加');
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        //layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                        lay('#frm').removeClass('layui-hide');
                        // layer.open({
                        //     type: 1
                        //     ,title: '在线调试'
                        //     ,content:  lay('#frm')
                        // });
                        form.val('example', {
                            "id": checkStatus.data[0].id // "name": "value"
                            ,"userId": checkStatus.data[0].userId
                            ,"createtime":checkStatus.data[0].createtime
                            ,"number": checkStatus.data[0].number //复选框选中状态
                            ,"note": checkStatus.data[0].note //开关状态

                        });


                        layer.open({
                            type:1,
                            area:['600px','600px'],
                            title: '编辑订单'
                            ,content: $("#frm"),
                            shade: 0,
                            btn: ['提交', '重置']
                            ,btn1: function(index, layero){

                                alert($("#frm").serialize());
                                $.ajax({
                                    url:"edit",
                                    data: $("#frm").serialize(),
                                    method: 'post',
                                    success: function(){
                                        alert('更新成功');
                                    }

                                })
                                layer.closeAll();
                            },
                            btn2: function(index, layero){
                                alert("2222");
                                return false;
                            },
                            cancel: function(layero,index){
                                layer.closeAll();
                            }

                        });


                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            };
        });

    });
</script>
